<template>
    <div class="index">
        <f-header :class="{'navBarWrap':navBarFixed}"></f-header>
        <el-row type="flex" justify="center" id="content" ><!--:style="{height:contentHeight}"-->
            <!--<vue-particles
                    color="#dedede"
                    :particleOpacity="0.7"
                    :particlesNumber="90"
                    shapeType="circle"
                    :particleSize="4"
                    linesColor="#dedede"
                    :linesWidth="1"
                    :lineLinked="true"
                    :lineOpacity="0.4"
                    :linesDistance="200"
                    :moveSpeed="3"
                    :hoverEffect="true"
                    hoverMode="grab"
                    :clickEffect="true"
                    clickMode="push"
            >
            </vue-particles>-->
            <el-col :xs="20" :md="20"> <!--class="other height0" --><!--:style="{'minHeight':minHeight+'px'}"-->
                <router-view ><!--@getHeight="getHeight1" --></router-view>
            </el-col>

        </el-row>
        <f-footer></f-footer>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                minHeight: 0,
                navBarFixed: false,
                contentHeight:'0',
            }
        },
        methods: {
            watchScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                //  当滚动超过 50 时，实现吸顶效果
                if (scrollTop > 50) {
                    this.navBarFixed = true
                } else {
                    this.navBarFixed = false
                }
            },
            /*getHeight1(contentHeight){
              if (contentHeight > 1817){
                this.contentHeight = contentHeight + 'px';
                document.getElementById("particles-js").style.height = contentHeight + "px";
              }
              else{
                this.contentHeight = '1817px';//782
                document.getElementById("particles-js").style.height = "1817px";
              }
            }*/
        },

        mounted () {
            let that = this;
            that.minHeight = document.documentElement.clientHeight;
            window.addEventListener('scroll', that.watchScroll);
            window.onresize = function () {
                that.minHeight = document.documentElement.clientHeight;
            };
        }
    }
</script>

<style scoped>
    #content{
        background-color: #f9f9f9;
        padding: 30px 0;
    }
    .navBarWrap {
        position:fixed;
        top:0;
        z-index:999;
        width: 100%;
    }
    /*#particles-js{
      position: absolute;
      height: 1817px;
      width: 100%;
      top: 0;
      left: 0;
    }
    .other{
      z-index: 9;
    }
    .height0{
      height: 0;
    }*/
</style>
